$.extend({
    doAgree: function(param, dom) {
        var borderColor = param.borderColor || '#8a8787';
        var iconColor = param.iconColor || '#8a8787';
        var fontColor = param.fontColor || '#333';
        var contractColor = param.contractColor || '#ff9800';

        var checkbox = document.createElement('div');
        checkbox.style.cssText = 'display: table-cell; vertical-align: middle; text-align: center; width: 30px;' 
        + 'height: 30px; border: 2px solid '+ borderColor +'; font-weight: bold; border-radius: 4px; color: '+ iconColor + ';'
        checkbox.innerText = '√';
        // checkbox点击事件
        checkbox.onclick = function() {
            checkbox.innerText = checkbox.innerText ? '' : '√';
            onCheckboxClick();
        }

        var tip = document.createElement('div');
        tip.style.cssText = 'display: table-cell; font-weight: bold; vertical-align: middle; padding-left: 8px; color: ' + fontColor + ';'
        tip.innerText = '勾选代表同意';

        var contract = document.createElement('div');
        contract.style.cssText = 'display: table-cell; vertical-align: middle; text-decoration: underline;'
        +'color: '+ contractColor + ';'
        contract.innerText = '《用户需知》';
        // 用户需知点击事件
        contract.onclick = function() {
            document.getElementById('mask').style.visibility = 'visible';
            document.getElementById('dialog').style.visibility = 'visible';
        }

        // 构建同意需知组件
        var doAgreeWrap = document.getElementById(dom);
        doAgreeWrap.append(checkbox);
        doAgreeWrap.append(tip);
        doAgreeWrap.append(contract);
    },

    

    contract: function(param, dom) {
        var mask = document.createElement('div');
        mask.id = 'mask';
        mask.style.cssText = 'position: absolute; justify-content: center; display: flex; align-items: center; visibility: hidden; top: 0; left: 0; width: 100%; height: 100%; background: #eeeeee80;'
        mask.onclick = function() {
            document.getElementById('mask').style.visibility = 'hidden';
            document.getElementById('dialog').style.visibility = 'hidden';
        }
        
        var dialog = document.createElement('div');
        dialog.id = 'dialog';
        dialog.style.cssText = 'visibility: hidden; padding: 20px; overflow: auto; width: 75%; height: 60%; background: #fff; box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);'
        mask.append(dialog);

        // 构建用户需知
        let dataSources = ['用户须知', '1.本产品仅针对本页面展示的标识内容。', '2.平台在不同渠道对产品有不同的宣推策略，故从不同渠道购买本产品，以当前渠道活动为标准。',
    '3.本平台有权单方面对产品价格、产品信息及库存进行调整。', '4.用户须同意提供必要可用及准确的个人资料。本平台须对用户的个人隐私资料进行保护，承诺不会擅自将用户的个人资料信息有意泄露、出租或出售给任何第三方。', 
    '5.本课程为线上虚拟产品，不涉及发货，一经购买不退不换。', '6.未经51CTO书面同意，用户不得向任何第三方透漏课程及辅导资料内容。', 
    '7.若用户发生影响正常教学的行为，平台可终止对此用户的权限及服务。', '8.购买成功后，请务必按照页面指引添加班主任老师微信，进群学习。', '9.特训营的课程为平台特制短期体验课，为用户提供方向与思路。'];
        var p = null;
        for (var i = 0, len = dataSources.length; i < len; i++) {
           p = document.createElement('p');
           p.innerText = dataSources[i];

           if (i === 0) {
               p.style.textAlign = 'center';
               p.style.fontWeight = 'bold';
           }
           dialog.append(p);
        }
        // 关闭按钮
        var closeBtn =  document.createElement('div');
        closeBtn.style.cssText = '';
        closeBtn.innerText = '×';
        dialog.append(closeBtn);

        var contractWrap = document.getElementById(dom);
        contractWrap.append(mask);
    },
});